$sidebar-margins: 10px !default;
$sidebar-border-radius: 4px !default;
$sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
$sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;

$tab-fg: #333 !default;
$tabs-bg: #fff !default;
$tab-hover-fg: #000 !default;
$tab-hover-bg: #eee !default;
$tab-active-fg: #fff !default;
$tab-active-bg: #0074d9 !default;

@import "base";

.leaflet-sidebar {
  box-shadow: $sidebar-shadow;

  @media (min-width: $threshold-sm) {
    border-radius: $sidebar-border-radius;

    &.leaflet-touch {
      border: $sidebar-touch-border;
    }
  }
}

// move other controls aside from sidebar
.leaflet-sidebar-left {
  &.leaflet-touch {
    box-shadow: none;
    border-right: $sidebar-touch-border;
  }

  & ~ .leaflet-control-container .leaflet-left {
    @media (min-width: $threshold-sm) {
      transition: left $sidebar-transition;
    }

    @media (min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
      left: $width-sm + $sidebar-margins;
    }

    @media (min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
      left: $width-md + $sidebar-margins;
    }

    @media (min-width: $threshold-lg) {
      left: $width-lg + $sidebar-margins;
    }
  }

  &.collapsed ~ .leaflet-control-container .leaflet-left {
    left: $tab-size + $sidebar-margins;
  }
}

.leaflet-sidebar-right {
  &.leaflet-touch {
    box-shadow: none;
    border-left: $sidebar-touch-border;
  }

  & ~ .leaflet-control-container .leaflet-right {
    @media (min-width: $threshold-sm) {
      transition: right $sidebar-transition;
    }

    @media (min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
      right: $width-sm + $sidebar-margins;
    }

    @media (min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
      right: $width-md + $sidebar-margins;
    }

    @media (min-width: $threshold-lg) {
      right: $width-lg + $sidebar-margins;
    }
  }

  &.collapsed ~ .leaflet-control-container .leaflet-right {
    right: $tab-size + $sidebar-margins;
  }
}
